<template>
	<div class="rule-wrap">
		<template v-if="mdseTypeProp==1">
			<a class="rule-link" ca="pt_v170720_groupdetail_rules_click" :href="ruleUrl">拼团规则<span class="des">规则详情<i class="icon-arrow"></i></span></a>
			<div class="rule-content">
				<ol class="step clearfix">
					<li class="step-item item-type-02"><i class="number">1</i><span class="text">支付开团或参团</span></li>
					<li class="step-item item-type-02"><i class="number">2</i><span class="text">邀请好友参团</span></li>
					<li class="step-item item-type-02"><i class="number">3</i><span class="text">人满成团等待发货</span></li>
				</ol>
			</div>
			<p class="rule-msg">完成支付后，须邀请好友参团。若在成团时间内达到成团人数则拼团成功，购买的车品会在48小时内发货（仅限工作日）；否则拼团失败， 自动退款。</p>
		</template>
		<template v-else>
			<a class="rule-link" ca="pt_v170720_groupdetail_rules_click" :href="ruleUrl">拼团规则<span class="des">规则详情<i class="icon-arrow"></i></span></a>
			<div class="rule-content">
				<ol class="step clearfix">
					<li class="step-item"><i class="number">1</i><span class="text">支付开团或参团</span></li>
					<li class="step-item"><i class="number">2</i><span class="text">邀请好友参团</span></li>
					<li class="step-item"><i class="number">3</i><span class="text">人满成团发抵扣券</span></li>
					<li class="step-item"><i class="number">4</i><span class="text">用券下单享优惠</span></li>
				</ol>
			</div>
			<p class="rule-msg">完成支付后，须邀请好友参团。若24小时内支付人数达到成团人数则拼团成功，自动发券；否则拼团失败，自动退款。付款停留时间为15分钟，过期订单自动取消。</p>
		</template>
		<!-- <a ca="pt_v170720_ptdetail_rules_click" @click="popType = !popType" href="javascript:;" class="model-title">拼团规则<span class="des">规则详情<i class="icon-arrow"></i></span></a>
		<div class="model-content">
			<ol class="step clearfix">
				<li class="step-item"><i class="number">1</i><span class="text">支付开团或参团</span></li>
				<li class="step-item"><i class="number">2</i><span class="text">邀请好友参团</span></li>
				<li class="step-item"><i class="number">3</i><span class="text">人满成团发权益券</span></li>
				<li class="step-item"><i class="number">4</i><span class="text">下单兑换权益券</span></li>
			</ol>
		</div>
		<p class="model-msg">拼团不成功，款项将原路返还择好自己爱车的轮胎尺寸款项将原路返还择好自己爱车的轮胎尺寸。</p>
		<div v-show="popType" class="pop-rule">
			<a href="javascript:;" @click="popType = !popType" class="close"></a>
			<p class="rule-text">规则规则规则</p>
		</div> -->
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	import {Toast, MessageBox} from 'mint-ui';
	//import shareImg from "../../../static/image/shareimg.png";
	export default{
		data (){
			return {
				popType:false,
				ruleUrl:'/cx/cxj/cxjweb/tuan/rule/rule.shtml'//规则页面链接
			};
		},
		props: {
		    mdseTypeProp: {
				default: 0,
		    	type: Number
		    }
		},
		/*watch:{
			mdseTypeProp: function (newVal, oldVal) {
				var _this = this;
			}
		}*/
	}
</script>

<style lang="scss" scoped>
	@import "../../../assets/css/common.scss";
		.rule-link{
		font-size:rem(15);
		padding-bottom:rem(14);
		margin-bottom:rem(15);
		border-bottom:1px solid #e7e7e7;
		display:block;
		color:#000;
		.des{
			font-size:rem(13);
			color:#888;
			float:right;
		}
		.icon-arrow{
			float:right;
			width:rem(7);
			height:rem(12);
			background:url('../../../assets/image/tuan/arrow.png') no-repeat;
			background-size:100% 100%;
			display:block;
			margin-top:rem(4);
			margin-left:rem(9);
		}
	}
	.rule-content{
		/*步骤*/
		.step{
			margin-bottom:rem(14);
		}
		.step-item{
			font-size:rem(13);
			margin-right:rem(15);
			float:left;
			.number{
				width:rem(16);
				height:rem(16);
				line-height:rem(16);
				text-align:center;
				background-color:#000;
				display:inline-block;
				color:#fff;
				vertical-align: top;
				border-radius:16px;
				margin-right:rem(5);
			}
			.text{
				width:rem(54);
				height:rem(30);
				line-height:rem(15);
				display:inline-block;
				vertical-align: middle;

			}
		}
		.item-type-02 {
			margin-right:rem(40);
		}
	}
	.rule-msg{
		font-size:rem(13);
		color:#999;
	}
	/*修补型样式*/
	.step-item:last-child{
		margin:0;
	}
	/* .rule-wrap{
		padding:rem(11) rem(15) rem(16) rem(15);
		background-color:#fff;
	}
	.model-title{
		font-size:rem(15);
		padding-bottom:rem(14);
		margin-bottom:rem(15);
		border-bottom:1px solid #e7e7e7;
		display:block;
		color:#000;
		.des{
			font-size:rem(13);
			color:#888;
			float:right;
		}
		.icon-arrow{
			float:right;
			width:rem(7);
			height:rem(12);
			background:url('../../../assets/image/tuan/arrow.png') no-repeat;
			background-size:100% 100%;
			display:block;
			margin-top:rem(4);
			margin-left:rem(9);
		}
	}
	.model-content{
		步骤
		.step{
			margin-bottom:rem(14);
		}
		.step-item{
			font-size:rem(13);
			margin-right:rem(15);
			float:left;
			.number{
				width:rem(16);
				height:rem(16);
				line-height:rem(16);
				text-align:center;
				background-color:#000;
				display:inline-block;
				color:#fff;
				vertical-align: top;
				border-radius:16px;
				margin-right:rem(5);
			}
			.text{
				width:rem(54);
				height:rem(30);
				line-height:rem(15);
				display:inline-block;
				vertical-align: middle;
	
			}
		}
	}
	.model-msg{
		font-size:rem(13);
		color:#999;
	}
	修补型样式
	.step-item:last-child{
		margin:0;
	}
	规则页面
	.pop-rule{
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin:auto;
		padding:rem(35) rem(15) rem(15) rem(15);
		background-color:#fff;
		z-index:999;
		.close{
			width:rem(15);
			height:rem(15);
			float:right;
			background:url('../../../assets/image/tuan/close.png') no-repeat;
			background-size:100% 100%;
			margin-top:rem(2);
			position:absolute;
			top:rem(15);
			right:rem(15);
		}
		.rule-text{
			font-size:rem(15);
		}
	} */
</style>
